<template>
  <div class="smart-home" :class="currentModeClass">
    <!-- 顶部导航 -->
    <nav class="nav">
      <div class="nav__container">
        <div class="nav__brand">
          <i class="fas fa-home brand-icon"></i>
          <span class="brand-text">智慧家居控制中心</span>
        </div>
        <div class="nav__toggle" style="color: deeppink;">
          <h2 class="user-name">“{{ username }}”的小家</h2>
        </div>
        <div class="nav__menu">
          <div class="weather">
            <i class="fas fa-cloud-sun weather-icon"></i>
            <span>25°C 晴朗</span>
          </div>
          <button class="voice-control !rounded-button" @click="toHomeMessage">
            <i class="fas fa-microphone"></i>
            <span>家庭留言板</span>
          </button>
          <div class="user-info">
            <i class="fas fa-cog setting-icon"></i>
            <div class="avatar" @click="toggleMenu">
              <div>
                <img :src="userPic || defaultPic" alt="用户头像" class="user-avatar">
              </div>
            </div>
            <!-- 用户菜单新增路由导航 -->
            <div v-if="isMenuVisible" class="user-menu">
              <div class="menu-item" @click="goChangePassword">修改密码</div>
              <div class="menu-item" @click="myself">个人信息</div>
              <div class="menu-item" @click="handleLogout">退出登录</div>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 设备状态概览 -->
      <section class="status-section">
        <h2 class="section-title">设备状态</h2>
        <div class="room-grid">
          <div v-for="(room, index) in rooms" :key="index" class="room-card" @click="goToDevicePage(room)">
            <div class="room-header">
              <h3 class="room-name">{{ room.name }}</h3>
              <span :class="['status-badge', room.online ? 'status-online' : 'status-offline']">
                {{ room.online ? '在线' : '离线' }}
              </span>
            </div>
            <div class="room-info">
              <div class="info-item">
                <span class="info-label">温度</span>
                <span>{{ room.temperature }}°C</span>
              </div>
              <div class="info-item">
                <span class="info-label">湿度</span>
                <span>{{ room.humidity }}%</span>
              </div>
              <div class="info-item">
                <span class="info-label">设备</span>
                <span>{{ room.devices }}个在线</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 监控面板 -->
      <section class="monitor-section">
        <h2 class="section-title">实时监控</h2>
        <div class="camera-grid">
          <div v-for="(camera, index) in cameras" :key="index" class="camera-card" @click="goToDevicePage(camera)">
            <img :src="camera.image" :alt="camera.name">
            <div class="camera-overlay">
              <div class="camera-info">
                <span>{{ camera.name }}</span>
                <div class="live-status">
                  <i class="fas fa-circle live-icon"></i>
                  <span>实时</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部控制栏 -->
    <footer class="footer">
      <div class="footer__container">
        <div class="mode-buttons">
          <button v-for="(mode, index) in modes" :key="index"
            :class="['mode-button !rounded-button', mode.active ? 'active' : '']" @click="selectMode(index)">
            <span>{{ mode.name }}</span>
          </button>

        </div>
        <button class="power-button !rounded-button">
          <i class="fas fa-power-off"></i>
          <span>一键关闭所有设备</span>
        </button>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { computed } from 'vue';
import axios from 'axios';

const userPic = ref('');
const username = ref('');
const defaultPic = 'https://ai-public.mastergo.com/ai/img_res/default-avatar.jpg';

onMounted(async () => {
  const loggedInPhone = localStorage.getItem('loggedInPhone');
  if (loggedInPhone) {
    try {
      const nameRes = await axios.get(`http://localhost:8080/api/auth/username-by-phone?phone=${loggedInPhone}`);
      username.value = nameRes.data;

      const avatarRes = await axios.get(`http://localhost:8080/api/auth/avatar?phone=${loggedInPhone}`);
      if (avatarRes.data.code === 200) {
        userPic.value = avatarRes.data.data;
      } else {
        console.warn('未能获取头像，使用默认头像');
      }

    } catch (error: any) {
      console.error('获取用户信息失败', error);
    }
  }
});
const currentModeClass = computed(() => {
  return modes.value.find(mode => mode.active)?.class || '';
});


const router = useRouter();

const isMenuVisible = ref(false);
const toggleMenu = () => {
  isMenuVisible.value = !isMenuVisible.value;
};

const rooms = ref([
  {
    name: '客厅',
    routeName: 'LivingRoom',
    online: true,
    temperature: 24,
    humidity: 55,
    devices: 5
  },
  {
    name: '主卧室',
    routeName: 'MasterBedroom',
    online: true,
    temperature: 23,
    humidity: 50,
    devices: 3
  },
  {
    name: '书房',
    routeName: 'StudyRoom',
    online: true,
    temperature: 25,
    humidity: 48,
    devices: 4
  },
  {
    name: '厨房',
    routeName: 'Kitchen',
    online: false,
    temperature: 26,
    humidity: 60,
    devices: 2
  }
]);

const cameras = ref([
  {
    name: '客厅监控',
    image: 'https://ai-public.mastergo.com/ai/img_res/8938a55d4dd0840528ca34ffeb35e285.jpg'
  },
  {
    name: '门口监控',
    image: 'https://ai-public.mastergo.com/ai/img_res/70f21d61c0f49a5dd32228e9264ce80f.jpg'
  },
  {
    name: '阳台监控',
    image: 'https://ai-public.mastergo.com/ai/img_res/76c1408f662dda0d5c03e16c78f4c45e.jpg'
  },
  {
    name: '车库监控',
    image: 'https://ai-public.mastergo.com/ai/img_res/5ca3033f731579f0f2a649f0f0f2b731.jpg'
  }
]);

const modes = ref([
  {
    name: '回家模式',
    active: true,
    class: 'mode-home'
  },
  {
    name: '离家模式',
    active: false,
    class: 'mode-away'
  },
  {
    name: '夜晚模式',
    active: false,
    class: 'mode-night'
  },
  {
    name: '节能模式',
    active: false,
    class: 'mode-save'
  }
]);


const selectMode = (index: number) => {
  modes.value.forEach((mode, i) => {
    mode.active = i === index;
  });
};


// 新增路由导航方法
const goChangePassword = () => {
  isMenuVisible.value = false; // 关闭菜单
  router.push({ name: 'ChangePassword' }); // 跳转到修改密码页面
};

const handleLogout = () => {
  isMenuVisible.value = false; // 关闭菜单
  router.push({ name: 'Login' }); // 跳转到登录页面
  // 实际项目中可在此处添加退出登录的接口调用
};

const myself = () => {
  isMenuVisible.value = false; // 关闭菜单
  router.push({ name: 'Myself' });
};

const goToDevicePage = (room) => {
  isMenuVisible.value = false;
  router.push({ name: room.routeName }); // 使用自定义路由名跳转
};

const toHomeMessage = () => {
  router.push({ name: 'HomeMessage' });
};

</script>

<style scoped>
@import '../assets/css/HomeView.css'
</style>